<template>
    <div class="login">
        <div class="shell">
            <h2 class="title">登录</h2>
            <input type="text" v-model="formData.username" placeholder="请输入用户名">
            <input type="password" v-model="formData.password" placeholder="请输入密码">
            <input type="submit" @click="loginHandler">
            <!-- <div class="footer">
                <div class="Remember" v-if="isLoginMode">
                    <input type="checkbox" id="rememberMe">
                    <label for="rememberMe">记住我</label>
                </div>
                <button id="Password" @click="toggleMode">{{ passwordButtonText }}</button>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { type IUsersMeData, type IUserLoginInfo } from '@/service/types/type53';
import { apiLogin } from '@/service/study5/demo3';
import { useRouter } from 'vue-router'

const router = useRouter()

const formData: IUserLoginInfo = reactive({
    username: '',
    password: ''
})

// 执行登录
const loginHandler = async () => {
    try {
        const resData = await apiLogin(formData)

        if (resData.code !== '2000' || !resData.data) {
            throw new Error(resData.msg || '未知错误')
        }
        // 登录成功
        localStorage.setItem('token', resData.data)

        router.replace({ path: '/studemo62/user' })
    } catch (e: any) {
        alert(e.message)
    }
}

// const isLoginMode = ref(true);
// const title = ref('Login');
// const username = ref('');
// const password = ref('');
// const usernamePlaceholder = ref('Username');
// const passwordPlaceholder = ref('Password');
// const buttonText = ref('Login');
// const passwordButtonText = ref('去注册');

// function toggleMode() {
//     if (isLoginMode.value) {
//         title.value = 'Register';
//         buttonText.value = 'Register';
//         passwordButtonText.value = '去登录';
//         usernamePlaceholder.value = 'New Username';
//         passwordPlaceholder.value = 'New Password';
//     } else {
//         title.value = 'Login';
//         buttonText.value = 'Login';
//         passwordButtonText.value = '去注册';
//         usernamePlaceholder.value = 'Username';
//         passwordPlaceholder.value = 'Password';
//     }
//     isLoginMode.value = !isLoginMode.value;
// }
</script>

<style scoped>
/* 将CSS样式放在这里 */
* {
    padding: 0;
    margin: 0;
    transition: .3s;
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url(./img/login_bg.avif);
    background-size: cover;
}

.shell {
    width: 350px;
    padding: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff49;
    border-radius: 50px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) inset;
    transform: translateY(-50px);
}

.title {
    font-size: 80px;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 0 0 10px #ff9dff80;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    height: 50px;
    margin: 10px 0;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    border: 5px solid transparent;
    background: rgba(255, 255, 255, .5);
    border-radius: 100px;
    padding: 5px 20px 0 20px;
    transition: 0.3s;
    font-size: 18px;
    outline: none
}

input[type="text"]:hover,
input[type="password"]:hover {
    background: rgba(255, 255, 255, 0);
    border: 5px solid #ffffff;
}

input[type="submit"] {
    width: 100%;
    height: 50px;
    padding: 10px;
    margin: 15px 0;
    border-radius: 100px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    letter-spacing: 3px;
}

input::placeholder {
    color: #92A7E8;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.Remember {
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #7597ff;
}

input[type="checkbox"] {
    display: block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background-color: #007bff;
}

#Password {
    border: none;
    background-color: #ffffff00;
    color: #7597ff;
    font-size: 18px;
}
</style>